<div class="main">
	<div class="container" style="margin-bottom: 20px;">
		<div class="qikan_banner">
			<div class="logo"><img src="/pc/img/qikan_logo.png" /></div>
			<div class="title">《{$rs.name}》</div>
			<div class="btn_container">
				<a class="layui-btn layui-btn-lg layui-btn-primary layui-border-primary layui-btn-radius" href="{:url('zhuanyeshukan/qikan_dingyue',['id'=>$rs.id])}"><i
						class="iconfont">&#xe648;</i> 订阅纸刊</a>
				<button class="layui-btn layui-btn-lg layui-btn-primary layui-border-primary layui-btn-radius" lay-on="test-offset-b"><i
						class="iconfont">&#xe63c;</i> 联系客服</button>
			</div>
		</div>
		<div class="qikan_list">
			<div class="hd">
				<div class="title">{$year}年期刊</div>
				<div>
					年份：
					<div class="layui-form" style="display: inline-block;">


						<select lay-filter="demo-select-filter">
							{volist name="years" id="item"}
								<option value="{$item}" {php}
									if($year!=''){
										if($year==$item){
											echo 'selected';
										}
									}else{
										if($i==0){
											echo 'selected';
										}
									}

								{/php}>{$item}</option>
							{/volist}
						</select>

					</div>
				</div>

			</div>
			<div class="bd">
				<ul class="shukan_list">
					{volist name="rs_qikan" id="item" empty="$empty"}
					<a href="{:url('zhuanyeshukan/qikanqishu_detail',['id'=>$item.id])}">
						<li>
							<img src="{$item.image}">
							<div class="title">《{$rs.name}》</div>
							<div class="desc">{$item.qishu}</div>
						</li>
					</a>
					{/volist}
				</ul>
			</div>
		</div>
	</div>
</div>
<script>
		$('#year_select').on('change', function() {

		        console.log($(this).val());
				window.location.href="{:url('zhuanyeshukan/qikan_detail')}?id={$rs.id}&year="+$(this).val();
		    });
		var layer = layui.layer;
		layui.use(function(){
		  layer = layui.layer;
		  var util = layui.util;
		  var form = layui.form;
		  var $ = layui.$;
		  // 事件
		  util.on('lay-on', {
		    'test-offset-b': function(){
		      layer.open({
		        type: 1,
				title: '联系客服',
		        offset: 'auto',
		        anim: 'slideUp', // 从下往上
		        area: ['320px', '320px'],
		        shade: 0.1,
		        shadeClose: true,
		        id: 'ID-demo-layer-direction-b',
		        content: '<div style="padding: 16px;">'+
					'<div style="display:flex;justify-content:center; margin-bottom:15px;">'+
						'<img src="{$site.dingyuekefu1}" style="width:150px;height:150px;">'+
						'<img src="{$site.dingyuekefu2}" style="width:150px;height:150px;">'+
					'</div>'+
					'<a href="tel:{$site.kefutel}"><div style="text-align:center">联系电话:{$site.kefutel}</div></a>'+
					'<div style="display:flex;justify-content:center; margin-top:15px;">'+
						'<button class="layui-btn layui-btn-normal layui-border-normal layui-btn-radius" onclick="save_pic()">保存图片到相册</button>'+
						'<button class="layui-btn layui-btn-normal layui-border-normal layui-btn-radius" onclick="copy({$site.kefutel})">一键复制联系电话</button>'+
					'</div>'+
				'</div>'
		      });
		    },

		  });

		  form.on('select(demo-select-filter)', function(data){
		      var elem = data.elem; // 获得 select 原始 DOM 对象
		      var value = data.value; // 获得被选中的值
		      var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
		      window.location.href="{:url('zhuanyeshukan/qikan_detail')}?id={$rs.id}&year="+value;
		      layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
		    });
		});
		function copy(text) {

		  const input = document.createElement('textarea');
		  input.value = text;
		  document.body.appendChild(input);
		  input.select();
		  document.execCommand('copy');
		  document.body.removeChild(input);
		  layer.msg('复制成功');
		}
		function save_pic(){
			// 获取图片URL
			var imgUrl = '{$site.dingyuekefu1}';

			// 创建一个临时的链接元素
			var link = document.createElement('a');
			link.href = imgUrl;

			// 设置链接元素的下载属性为图片的名称
			link.download = get_file_name('{$site.dingyuekefu1}');

			// 将链接元素点击事件派发到文档
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);

			// 获取图片URL
			var imgUrl = '{$site.dingyuekefu2}';

			// 创建一个临时的链接元素
			var link = document.createElement('a');
			link.href = imgUrl;

			// 设置链接元素的下载属性为图片的名称
			link.download = get_file_name('{$site.dingyuekefu2}');

			// 将链接元素点击事件派发到文档
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
		function get_file_name(url){


			// 创建 URLSearchParams 对象并传入 URL
			fileName=url.split('/');
			return fileName[fileName.length-1];
		}
		console.log(get_file_name('{$site.dingyuekefu1}'));


	</script>
